<template>
	<view>
		<view class="tab_box">
			<u-tabs activeColor='#e34b0f' inactiveColor='#000' fontSize="30" :list="cate" :bold="true" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		
		<view style="height: 80rpx;"></view>
		<block v-if="list.length">
			<view class="order_list" @click="$project.toPath('/pages/keep/info?id='+item.id)" v-for="(item,index) in list" :key="index">

				<view class="order_content">
					{{item.ms}}
				</view>

				<!-- <view class="flex flex-full">
					<view v-for="(items,indexs) in item.images"
						:key="indexs">
						<image :src="items" class="img"></image>
					</view>
				</view> -->

				<view class="order_title">
					<view></view>
					<view>提交时间:{{item.createtime}}</view>
				</view>

			</view>
		</block>
		<view v-if="show" class="bitmap">
			<image :src="none" mode="widthFix"></image>
			<view>暂无信息~</view>
		</view>

	<!-- 	<view style="height: 44px;"></view>
		<view class="bottom_box" @click="$project.toPath('/pages/keep/add')">提交</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				current: 0,
				cate: [
					{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '待派单'
					}, 
					{
						id: 2,
						name: '待处理'
					},
					{
						id: 3,
						name: '处理中'
					}, 
					{
						id: 4,
						name: '已完成'
					}
				],
				
				list: [],
				total: 0,
				params: {
					page: 1,
					status: 0
				},
				show: false,
				none:''
			}
		},
		methods: {
			change(e) {
				console.log(e);
				this.current = e;
				this.params.status=this.cate[e].id;
				this.getList();
			},
			previewImage(e, key) {
				uni.previewImage({
					urls: e,
					current: key
				});
			},
			check(e) {
				this.params.status = e;
				this.getList();
			},
			setShow() {
				if (this.total < 1) {
					this.show = true;
				} else {
					this.show = false;
				}
			},
			getList() {
				this.params.page = 1;
				this.params.token = uni.getStorageSync('userToken');
				this.$get(this.$api.keepLists, this.params, (res) => {
					let {
						code,
						data
					} = res.data;
					if (code == 1) {
						this.list = data.data;
						this.total = data.total;
						this.setShow();
					}
				})
			}
		},
		onShow() {
			this.getList();
		},
		onLoad(e) {
			this.none=this.$imgUrl+'assets/img/none_order.png';
			if (e.title) {
				uni.setNavigationBarTitle({
					title: e.title
				})
			}
		},
		onReachBottom() {
			if (this.total <= this.list.length) return;

			this.params.page++;
			this.params.token = uni.getStorageSync('qsToken');
			this.$get(this.$api.riderLists, this.params, res => {
				let data = res.data;

				if (data.code == 1) {

					this.list = this.list.concat(data.data.data);
					this.total = data.data.total;
				}
			});
		}
	}
</script>

<style scoped lang="scss">
	
	/deep/ .u-tab-item {
		background-color: transparent !important;
		font-size: 30rpx !important;
	}
	.tab_box{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
	}
	
	.state {
		color: red;
		text-align: right;
	}

	page {
		background: #F8F8F8;
	}

	.order_list {
		background: #fff;
		padding: 0 15rpx 15rpx 15rpx;
		margin-bottom: 15rpx;
		margin-top: 10px;
	}

	.order_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.order_title view {
		font-size: 26rpx;
		color: #666666;
	}

	.order_content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0 15rpx 0;
		/* border-bottom: 2rpx solid #eee; */
	}

	.content_left {
		display: flex;
		flex-direction: column;
	}

	.order_name {
		width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 30rpx;
	}

	.content_price {
		font-size: 60rpx;
		color: #f73333;
		font-weight: bold;
	}

	.order_text {
		flex: 1;
		border-top: 1rpx solid #999999;
		border-bottom: 1rpx solid #999999;
		text-align: center;
		font-size: 22rpx;
		color: #333333;
	}

	.order_text:last-child {
		border-right: 1rpx solid #999999;
	}

	.order_bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.order_price {
		display: flex;
		align-items: center;
		font-size: 22rpx;
	}

	.order_price view {
		color: #333;
	}

	.order_price text {
		color: #FF0000;
	}

	.bitmap {
		text-align: center;
		padding-top: 100rpx;
	}

	.bitmap image {
		width: 60%;
	}

	.bitmap view {
		color: gray;
		font-size: 26rpx;
		margin-top: 30rpx;
	}

	.tab {
		background-color: white;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
	}

	.state_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn {
		border-radius: 23rpx;
		width: 140rpx;
		display: inline-block;
		height: 46rpx;
		line-height: 46rpx;
		margin-left: 20rpx;
		font-size: 26rpx;
		text-align: center;

	}

	.red {
		color: #FF3333;
		border: 1px solid #F33;
	}

	.black {
		color: #555;
		border: 1px solid #555;
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #1677fe;
		color: white;
		box-sizing: border-box;
		padding: 25rpx 0;
		text-align: center;
	}

	.img {
		width: 100rpx;
		height: 100rpx;
		margin-right: 10rpx;
	}
</style>